<script setup>
import { reactive } from 'vue';
const emits = defineEmits(['ShowM','Shows'])

const data = reactive({
  show: true,
  Index: -1,
  vs: []
})
console.log(data.show);
// 点击高亮
const Active = (index, item) => {
  data.Index = index
  emits('ShowM', item.id, item.title)
  emits('Shows', 'a')
  console.log(item.id);

  let obj = localStorage.getItem('key')
  let vs = JSON.parse(obj) || []
  vs.push(item)

  localStorage.setItem('key', JSON.stringify(vs))

}
defineProps({
  listOne: {
    type: Object,
  },
  sn: {
    type: Boolean,
  },
})

</script>

<template>
  <div>
    <van-popup v-model:show="listOne.Oshow" position="bottom">
      <slot name="one">
      </slot>
      <ul class="u1">
        <li v-for="(item, index) in listOne.list" :key="index" :class="(data.Index === index ? 'l1 active' : 'l1')"
          @click="Active(index, item)">
          <div class="ts">
            {{ (item.title || item.major_name) }}
          </div>
          <div class="tx">
            {{ item.brief }}
          </div>

        </li>
      </ul>
      <!-- {{sn}} -->
    </van-popup>

  </div>
</template>

<style lang="scss" scoped>
.u1 {
  width: 700px;
  // background-color: red;
  // text-align: center;
  font-size: 35px;
  margin: 0 auto;
  margin-bottom: 30px;
   color: #000;

  .l1 {
    width: 100%;
    height: 110px;
    background-color: #f8f8f5;
    margin-top: 20px;
    border-radius: 70px;
    display: flex;
    flex-direction: column;


    .ts {
      text-align: center;
      margin-top: 10px;
    }

    .tx {
      // background-color: green;
      text-align: center;
      // background-color: red;
      font-size: 25px;
    }


  }

  .active {
    // color: #fff;
    color: #ffff;
    background-color: #f15a24;
  }
}
</style>
